<style lang="scss" scoped>
	.content {

		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.top {
		padding: 20rpx 0;
	}

	.search {
		width: 690rpx;
		height: 68rpx;
		background: #f4f5f7;
		border: 2rpx solid #f5f5f5;
		border-radius: 46rpx;
		margin: 0rpx auto;
		padding: 20rpx;

		.ipt {
			flex: 1;
		}
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;

		.line {
			width: 100%;
			height: 100rpx;
			border-top: 1px solid #eeeeee;

			.ipt {
				width: 500rpx;
				text-align: right;
			}
		}

		.line2 {
			width: 100%;
			border-top: 1px solid #eeeeee;
			align-items: flex-start;

			.des {
				width: 500rpx;
				text-align: justify;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.btns {
		.btn {

			padding: 10rpx 30rpx;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}
	}

	.sbtn {
		width: 176rpx;
		height: 88rpx;
		border: 2rpx solid #dee2ee;
		border-radius: 46rpx;
	}

	.lbtn {
		width: 484rpx;
		margin-right: 0;
	}

	.tip {
		color: #98A5B3;
		padding: 0 30rpx;
		width: 100%;
	}

	.top {
		width: 100%;
		height: 170rpx;

		.ball {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #dee2ee;
			font-size: 20rpx;
			margin-bottom: 10rpx;
		}

		.rowline {
			width: 130rpx;
			height: 4rpx;
			background: #dee2ee;
			border-radius: 4rpx;
			transform: translateY(-20rpx);
		}

		.blue {
			background: #409eff;
			color: white
		}
	}
</style>

<template>
	<view class="content">
		<view class="top bgwhite center-flex">
			<view class="colum-flex">
				<view class="ball center-flex blue">
					1
				</view>
				<view>基本信息</view>
			</view>
			<view class="rowline"></view>
			<view class="colum-flex">
				<view class="ball center-flex">
					2
				</view>
				<view>制定里程碑</view>
			</view>
			<view class="rowline"></view>
			<view class="colum-flex">
				<view class="ball center-flex">
					3
				</view>
				<view>制定计划</view>
			</view>

		</view>
		<view class="tip between-flex m-top30 f28">
			<view>创建人:{{user.value | user}}</view>
			<view>创建时间:{{date | alltime}}</view>
		</view>
		<view class="box" style="padding-bottom: 0;">
			<view class="textColor f32 bold p-bottom30">基础信息</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>项目名称</view>
				<input class="ipt" type="text" v-model="title" maxlength="100" placeholder="请输入" />
			</view>
			<view class="line2 between-flex f28 p-top20">
				<view class="gray"><span class="red">*</span>项目描述</view>
				<textarea class="des textColor" style="height:120rpx;" maxlength="255" v-model="remark"
					placeholder="请输入项目描述" />

			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>项目开始日期</view>
				<view class="blue" @click="showStarttime=true">{{startTime}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>项目结束日期</view>
				<view class="blue" @click="showEndtime=true">{{endTime?endTime:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray p-left10">引用项目</view>
				<view class="blue" @click="project?$navTo( PagesCourseRouterConfig.ChooseProject+'?ids='+project.value):$navTo(PagesCourseRouterConfig.ChooseProject)">{{project?project.name:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>审核人</view>
				<view class="blue" @click="$navTo(PagesCourseRouterConfig.ChoosePerson+'?type=2')">{{people?people.name:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>项目类型</view>
				<picker class="choosearea" mode="selector" :range="itemType" range-key="name" @change="chooseitemType">
					<view class="blue">{{type?type.name:'请选择'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>紧急程度</view>
				<picker class="choosearea" mode="selector" :range="dic.itemLevel" range-key="name"
					@change="choosepriority">
					<view class="blue">{{priority?priority.name:'请选择'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>项目负责人</view>
				<view class="blue" @click="principal?$navTo(PagesCourseRouterConfig.ChoosePerson+'?type=3&users='+principal.value):$navTo(PagesCourseRouterConfig.ChoosePerson+'?type=3')">
					{{principal?principal.name:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray p-left10">参与人员</view>
				<view class="blue align-flex" @click="!person?$navTo(PagesCourseRouterConfig.ChoosePerson):$navTo(PagesCourseRouterConfig.ChoosePerson+'?users='+person.value)">
					<span v-if="!person">请选择</span>
					<span v-else class=" align-flex">
						<view style="max-width:370rpx;" class="one">{{person.value | users}}</view>
						等{{person.value.split(',').length}}人
					</span>
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray p-left10">项目级别</view>
				<picker class="choosearea" mode="selector" :range="dic.itemProjectLevel" range-key="name"
					@change="chooseprojectLevel">
					<view class="blue">{{projectLevel?projectLevel.name:'请选择'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="box " style="padding-bottom: 0;">
			<view class="between-flex p-bottom30">
				<view class="f32 bold textColor">附件</view>
				<view class="btns align-flex">
					<view class="btn center-flex blue m-right20" @click="chooseImg">拍照</view>
					<view class="btn center-flex blue" @click="uploadfile">上传附件</view>
				</view>
			</view>
			
			<view class="line between-flex f28" v-for="item,index in enclosure" :key="index">
				<view class="align-flex blue" @click="$open(item.url)">
					<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
					{{item.fileName.substring(item.fileName.length-10)}}
				</view>
				<view class="gray">
					<u-icon name='close' @click="delfile(index)"></u-icon>
				</view>
			</view>



		</view>

		<view class="space"></view>
		<view class="footer between-flex paddingBottom">
			<view class="sbtn center-flex textColor bold" @click="$back">取消</view>
			<view class="lbtn" @click="submit">下一步</view>
		</view>
		<u-picker v-model="showStarttime" mode="time" :params="params" @confirm="confirm($event,1)"></u-picker>
		<u-picker v-model="showEndtime" mode="time" :params="params" @confirm="confirm($event,2)"></u-picker>
	</view>
</template>

<script>
	import PagesCourseRouterConfig from '@/pagesCourse/routerConfig.js'
		import PagesProjectRouterConfig from  '@/pagesProject/routerConfig.js'
	export default {
		data() {
			return {
				PagesCourseRouterConfig,
				PagesProjectRouterConfig,
				date: '',
				navheight: 0,
				head: this.$head,
				title: '',
				remark: '',
				startTime: '',
				endTime: '',
				showStarttime: false,
				showEndtime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				user:'',
				project: null, //引用项目
				people: null, //审核人
				dic: uni.getStorageSync('dic'),
				priority: null, //项目优先级
				projectLevel: null, //项目级别
				person: null, //参与人员
				principal: null, //项目负责人
				enclosure: [], //附件
				itemType: [{
						name: '新增',
						value: '2'
					},
					{
						name: '优化',
						value: '1'
					}
				],
				type:null,
				itemCode:'',
				from:'',//2代表来自方案定制
			}
		},
		onLoad(e) {
			
			
			if(e.hasOwnProperty('type')){
				if(e.type==2){
					this.itemCode=e.itemCode
					this.getinfo()
					this.from=e.type
					uni.setNavigationBarTitle({
						title:'方案定制'
					})
				}
			}else{
				this.getdate()
				this.user=this.$getUser()
				// 处理默认选项
				this.dic.itemLevel.forEach(item=>{
					if(item.name=='一般'){
						this.priority=item
					}
				})
			}
		},
		beforeDestroy() {
			uni.removeStorageSync('creatProjectInfo')
		},
		methods: {
			getUser(value){
				
				var list = uni.getStorageSync('user')
				for (var key in list) {
					if (key == value) {
						return {
							name:list[key],
							value: key,
							id: key
						}
					}
				}
			},
			getinfo(){
				this.$pop.ajaxPost('/busItemInfo/getDetail',{
					itemCode:this.itemCode
				}).then(res=>{
					// 数据默认渲染
					var info=res.body.info
					this.title=info.title
					this.remark=info.remark
					this.user={
						value:info.createUser
					}
					this.startTime=info.startTime.substring(0,10)
					this.endTime=info.endTime.substring(0,10)
					if(info.reviewer){
						this.people=this.getUser(info.reviewer)
					}
					info.itemType==1?this.type=this.itemType[1]:this.type=this.itemType[0]
					this.dic.itemLevel.forEach(item=>{
						if(item.value==info.priority){
							this.priority=item
						}
					})
					if(info.principal){
						this.principal=this.getUser(info.principal)
					}
					if(info.joinUser){
						this.person={
							value:info.joinUser
						}
					}
					if(info.projectLevel){
						this.dic.itemProjectLevel.forEach(item=>{
							if(item.value==info.projectLevel){
								this.projectLevel=item
							}
						})
					}
					if(info.enclosure){
						this.enclosure=JSON.parse(info.enclosure)
						this.enclosure.forEach(item=>{
							item.fileName=item.name
							item.oldName=item.name
						})
					}
				})
			},
			submit() {
				if (!this.title) {
					this.$msg('请输入项目名称')
					return
				}
				if (!this.remark) {
					this.$msg('请输入项目描述')
					return
				}
				if (!this.endTime) {
					this.$msg('请选择项目结束时间')
					return
				}
				if (!this.people) {
					this.$msg('请选择审核人')
					return
				}
				if (!this.type) {
					this.$msg('请选择项目类型')
					return
				}
				if (!this.priority) {
					this.$msg('请选择紧急程度')
					return
				}
				if (!this.principal) {
					this.$msg('请选择项目负责人')
					return
				}
				var obj = {
					title: this.title,
					remark: this.remark,
					startTime: this.startTime,
					endTime: this.endTime,
					reviewer: this.people.value,
					itemType: this.type.value,
					priority: this.priority.value,
					principal: this.principal.value
				}
				if(this.itemCode){
					obj.itemCode=this.itemCode
				}
				if (this.project) {
					obj.parentId = this.project.value
				}
				if (this.person) {
					obj.joinUser = this.person.value
				}
				if (this.projectLevel) {
					obj.projectLevel = this.projectLevel.value
				}
				if (this.enclosure.length > 0) {
					var enclosure = []
					this.enclosure.forEach(item => {
						enclosure.push({
							name: item.oldName,
							url: item.url
						})
					})
					obj['enclosure'] = JSON.stringify(enclosure)
				}
				// console.log(obj)
				this.$showloading()
				this.$pop.ajaxPost('/busItemInfo/save', obj).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						obj.itemCode = res.body
						uni.setStorageSync('creatProjectInfo', obj)
						uni.setStorageSync('from',this.from)
						this.$navTo(this.PagesProjectRouterConfig.Addmainwork)
					} else {
						this.$msg(res.msg)
					}
				})

			},
			confirm(e, index) {
				console.log(e)
				if (index == 1) {
					this.startTime = e.year + '-' + e.month + '-' + e.day
				} else {
					
				
					var start = new Date((this.startTime).replace(/-/g, '/')).getTime() //项目开始时间
				
					var endTime= e.year + '-' + e.month + '-' + e.day
					var end = new Date((endTime).replace(/-/g, '/')).getTime()
					if(end<start){
						this.$msg('项目结束时间不能小于开始时间')
					}else{
						this.endTime = endTime
					}
					
					
				}
			},
			chooseitemType(e){
				this.type = this.itemType[e.detail.value]
			},
			choosepriority(e) {
				this.priority = this.dic.itemLevel[e.detail.value]
			},
			chooseprojectLevel(e) {
				this.projectLevel = this.dic.itemProjectLevel[e.detail.value]
			},
			getdate() {
				var date = new Date();

				this.date = parseInt(date.getTime() / 1000)
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hour = date.getHours()
				var min = date.getMinutes()
				month < 10 ? month = '0' + month : ''
				strDate < 10 ? strDate = '0' + strDate : ''
				hour < 10 ? hour = '0' + hour : ''
				min < 10 ? min = '0' + min : ''
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

				this.startTime = currentdate;
			},
			delfile(index) {
				this.enclosure.splice(index, 1)
			},
			//选择图片
			async chooseImg() {

				var file = await this.$chooseImg()

				this.enclosure.push(file)

			},
			async uploadfile() {

				var file = await this.$uploadfile()
				this.enclosure.push(file)

			},


		}
	}
</script>
